<template>
    <div>
        <!-- 群聊 已读未读 剩余多少人未读 全部已读 -->
        <div v-if="messageType === 'group'" class="message-view mt-20">
            <n-scrollbar style="width: 100%;height: 550px">
                <div ref="roomRef" class="room">
                    <div v-for="item in user" :key="item.id">

                        <div v-if="userName !== item.name" class="user-content mb-20">
                            <div v-if="!item.withdraw" class="avatar mt-2 mr5">
                                <n-tooltip>
                                    <template #trigger>
                                        <n-avatar v-if="item.avatar !== ''" round size="large" :src="item.avatar">
                                        </n-avatar>
                                        <n-avatar v-else round size="large" :style="{
                                            color: 'yellow',
                                            backgroundColor: '#18a058',
                                        }">
                                            {{ item.name.slice(0, 4) }}
                                        </n-avatar>
                                    </template>
                                    {{ item.name }}
                                </n-tooltip>
                            </div>
                            <div v-if="!item.withdraw" class="row">
                                <p class="message-content">
                                    {{ item.message }}
                                </p>
                                <p class="time mt-3 ml5 fz-13">{{ item.time }}</p>
                            </div>
                        </div>
                        <!-- left -->
                        <div v-if="userName === item.name" class="right-user-content">
                            <div v-if="!item.withdraw" class="mr5">
                                <n-popconfirm @positive-click="handlerWithdraw(item, 'group')" :show-icon="false">
                                    <template #trigger>
                                        <p class="right-message-content">
                                            {{ item.message }}
                                        </p>
                                    </template>
                                    撤回该条消息？
                                </n-popconfirm>

                                <p style="text-align: right;" class="time mt-3 mr15 fz-13">{{ item.time }}</p>
                            </div>
                            <div v-if="!item.withdraw" class="avatar mt-2 mr5">
                                <n-tooltip>
                                    <template #trigger>
                                        <n-avatar v-if="item.avatar !== ''" round size="large" :src="item.avatar">
                                        </n-avatar>
                                        <n-avatar v-else round size="large" :style="{
                                            color: 'yellow',
                                            backgroundColor: '#18a058',
                                        }">
                                            {{ item.name.slice(0, 4) }}
                                        </n-avatar>
                                    </template>
                                    {{ item.name }}
                                </n-tooltip>
                            </div>
                        </div>
                        <div v-if="item.withdraw" class="withdraw mb-20 mt-20">
                            <p v-if="userName !== item.name">"{{ item.name }}" 撤回了一条消息 </p>
                            <p v-if="userName === item.name">你撤回了一条消息</p>
                            <n-button v-if="userName === item.name" text type="primary"
                                @click="updateWithdrawInfo(item.message)">重新编辑</n-button>
                        </div>
                    </div>
                </div>


            </n-scrollbar>
        </div>
        <div v-else class="message-view mt-20">
            <n-scrollbar style="width: 100%;height: 550px">
                <div ref="roomRef" class="room">
                    <div v-for="item in privateUser" :key="item.id">
                        <div v-if="userName === item.name" class="user-content mb-20">
                            <div v-if="!item.withdraw" class="avatar mt-2 mr5">
                                <n-tooltip>
                                    <template #trigger>
                                        <n-avatar v-if="item.avatar !== ''" round size="large" :src="item.avatar">
                                        </n-avatar>
                                        <n-avatar v-else round size="large" :style="{
                                            color: 'yellow',
                                            backgroundColor: '#18a058',
                                        }">
                                            {{ item.name.slice(0, 4) }}
                                        </n-avatar>
                                    </template>
                                    {{ item.name }}
                                </n-tooltip>
                            </div>
                            <div v-if="!item.withdraw" class="row">
                                <p class="message-content">
                                    {{ item.message }}
                                </p>
                                <p class="time mt-3 ml5 fz-13">{{ item.time }} <span
                                        :class="{ 'active': item.isRead }">{{
                                            item.isRead ? '未读' : '已读' }}</span></p>
                            </div>
                        </div>

                        <div v-if="userName !== item.name" class="right-user-content">

                            <div v-if="!item.withdraw" class="mr5">
                                <n-popconfirm @positive-click="handlerWithdraw(item, 'private')" :show-icon="false">
                                    <template #trigger>
                                        <p class="right-message-content">
                                            {{ item.message }}
                                        </p>
                                    </template>
                                    撤回该条消息？
                                </n-popconfirm>
                                <p style="text-align: right;" class="time mt-3 mr15 fz-13">{{ item.time }} <span
                                        :class="{ 'active': item.isRead }">{{ item.isRead ? '未读' : '已读' }}</span></p>
                            </div>
                            <div v-if="!item.withdraw" class="avatar mt-2 mr5">
                                <n-tooltip>
                                    <template #trigger>
                                        <n-avatar v-if="item.avatar !== ''" round size="large" :src="item.avatar">
                                        </n-avatar>
                                        <n-avatar v-else round size="large" :style="{
                                            color: 'yellow',
                                            backgroundColor: '#18a058',
                                        }">
                                            {{ item.name.slice(0, 4) }}
                                        </n-avatar>
                                    </template>
                                    {{ item.name }}
                                </n-tooltip>
                            </div>
                        </div>
                        <div v-if="item.withdraw" class="withdraw mb-20 mt-20">
                            <p v-if="userName == item.name">"{{ item.sendUserName }}" 撤回了一条消息 </p>
                            <p v-if="userName !== item.name">你撤回了一条消息</p>
                            <n-button v-if="userName !== item.name" text type="primary"
                                @click="updateWithdrawInfo(item.message)">重新编辑</n-button>
                        </div>
                    </div>

                </div>
            </n-scrollbar>
        </div>

        <div class="message-input">
            <input @keyup.enter="handerSend" v-model="messageValue" placeholder="决定喷谁合适 决定好了就去选择一个" type="text">
            <p @click="handerSend">
                <i class="iconfont icon-kuaijierukou"></i>
            </p>
        </div>
    </div>

</template>


<script lang="ts">
import { generateUUID } from '@/utils/index';
export interface UserMessage {
    id: number | string,
    name: string,
    message: string,
    messageLen?: number
    sendUserName?: string
    time: string,
    avatar: string,
    isRead: boolean,
    withdraw?: boolean,
}
// 聊天消息
// 发送事件 更新
export default defineComponent({
    name: 'common-comment',
    props: {
        user: {
            type: Array<UserMessage>,
            default: () => []
        },
        privateUser: {
            type: Array<UserMessage>,
            default: () => []
        },
        messageType: {
            type: String,
            default: ''
        }
    },
    setup({ messageType }, { emit }) {
        const userName = localStorage.getItem('u') as string;
        const messageValue = ref('');
        const loadingBar = useLoadingBar();
        const roomRef: any = ref('');

        function handerSend() {
            loadingBar.start();
            if (messageValue.value) {
                let currentUser: UserMessage = {
                    id: generateUUID(),
                    name: userName,
                    message: messageValue.value,
                    time: new Date().toLocaleTimeString(),
                    avatar: localStorage.getItem('avatar') ?? '',
                    messageLen: 0,
                    isRead: true, // true 未读 false 已读
                    withdraw: false, // 消息撤回
                }
                if (messageType === 'private') {
                    emit('update-privateUser', currentUser);
                    loadingBar.finish();
                    messageValue.value = '';
                    return;
                }
                emit('update-user', currentUser);
                loadingBar.finish();
                messageValue.value = '';
            }
        }
        if (messageType === 'private') {
            handerPrivate([]);


        }
        function handerPrivate(userList: UserMessage[]) {
            if (userList.length > 0) {
                if (roomRef.value) {
                    setTimeout(() => {
                        nextTick(() => {
                            roomRef.value.lastElementChild?.scrollIntoView({ behavior: "smooth" });
                        })
                    }, 500)
                }
                return;
            }
            nextTick(() => {
                if (roomRef.value) {
                    setTimeout(() => {
                        nextTick(() => {
                            roomRef.value.lastElementChild?.scrollIntoView({ behavior: "smooth" });
                        })
                    }, 500)
                }
            })
        }
        function groupScrollIntoView(userList: UserMessage[]) {
            if (userList.length <= 0) return;
            watch(userList, () => {
                if (roomRef.value) {
                    setTimeout(() => {
                        nextTick(() => {
                            roomRef.value.lastElementChild.scrollIntoView({ behavior: "smooth" });
                        })
                    }, 500)

                }
            }, { deep: true })
        }

        //重新编辑发送
        function updateWithdrawInfo(message: string) {
            messageValue.value = message;
            emit('update-withdraw', message);
        }


        function handlerWithdraw(item: UserMessage, type: string) {
            item.withdraw = true;
            if (type === 'group') {
                emit('withdraw-sendMessage', item);
                return;
            }
            emit('withdrawPrivate-Message', item);
        }


        return {
            userName,
            handerSend,
            messageValue,
            roomRef,
            handerPrivate,
            groupScrollIntoView,
            updateWithdrawInfo,
            handlerWithdraw,

        }
    }
})

</script>


<style lang="scss" scoped>
.user-content {
    display: flex;
    position: relative;
}

.withdraw {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    cursor: pointer;
    font-size: 12px;

    p {
        margin-right: 8px;
    }
}

.active {
    color: #63e2b7;
}

.read {
    color: #8491A5;
}

.right-user-content {
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.outpost {
    position: absolute;
    left: 0;
}

.message-content {
    color: #8491a5;
    font-size: 13px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #f2f3f5;
    position: relative;
}

.right-message-content {
    color: #8491a5;
    font-size: 14px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #feeadd;
    position: relative;
}

.time {
    color: #8491a5;
}

.message-input {
    width: calc(100%);
    height: 40px;
    border-radius: 10px;
    display: flex;
    background-color: #f2f3f5;

    input {
        flex: 1 auto;
        width: 80%;
        line-height: 40px;
        text-indent: 10px;
        font-size: 14px;
        outline: none;
        outline: 0;
        border: none;
        color: #8491a5;
        border-radius: 10px;
        background-color: #f2f3f5;
    }

    p {
        width: 30px;
        line-height: 40px;
    }
}
</style>